<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>级联演示</title>
	<!-- 引入线上layui -->
	<link rel="stylesheet" th:href="@{/static/lib/layui-v2.3.0/css/layui.css}" media="all">
	<script th:src="@{/static/lib/layui-v2.5.7/layui.js}" charset="utf-8"></script>

	<style>
		.main{
			margin: 20px;
		}
	</style>
</head>
<body>
	<div class="main">
        <cascader id="demo1"></cascader>
        <cascader id="demo2"></cascader>
		<!-- <cascader id="demo3"></cascader> -->
        <button id="btn" class="layui-btn">提交</button>
	</div>
	<script>
		layui.config({
            base: '/lib/layui-v2.5.7/mods/ajaxCascader/'
            ,version: '1.6'
        });
        layui.use(['jquery','ajaxCascader'],function(){
            var $ = layui.jquery;
        	var cascader = layui.ajaxCascader;

            // Ajax传参模式
        	cascader.load({
                elem: '#demo1'
                ,search: {
                    show: true,
                    minLabel: 1,
                    // placeholder: '请输入搜索词'
                }
                ,clear: true
                ,value: 0
                ,getChildren: function(value,callback){
                    var data = []
                    $.ajax({
                        url:'/shopsService/shops/getAreaData/'+value,
                        type:'get',
                        success:function(res){
                            data = res.data;
                            for(var i in data){
                                data[i].value = data[i].id;
                                data[i].label = data[i].name;
                                delete data[i].id;
                                delete data[i].name;
                                if(data[i].level==4){
									data[i].hasChild = false;
								}else {
									data[i].hasChild = true;
								}

                            }
                            callback(data);
                        }
                    });
                },
                // chooseData: ["520000000000", "520100000000"]
            });
            // Ajax传参模式
            // cascader.load({
            //     elem: '#demo3'
            //     ,search: {
            //         show: true,
            //         // minLabel: 1,
            //         // placeholder: '请输入搜索词'
            //     }
            //     ,value: 0
            //     ,getChildren: function(value,callback){
            //         var data = []
            //         $.ajax({
            //             url:'https://open.gog.cn/appz/region/getRegion/'+value,
            //             type:'get',
            //             success:function(res){
            //                 data = res.data;
            //                 for(var i in data){
            //                     data[i].value = data[i].id;
            //                     data[i].label = data[i].name;
            //                     delete data[i].id;
            //                     delete data[i].name;
            //                     data[i].hasChild = true;
            //                 }
            //                 callback(data);
            //             }
            //         });
            //     },
            //     chooseData: ["520000000000"]
            // });

            let codeData = [
                { value: '1', label: '123456' },
                { value: '2', label: '123457896', children: [
                    { value: '5', label: '456' }
                ] },
            ]
            // 直接赋值模式
            cascader.load({
                elem:'#demo2',
                // prop:{
                //     value:'id',
                //     label:'name'
                // }
                data: codeData,
                showlast: true,
                width: '100%',
                height: 50,
                chooseData: ['1']
                // [
                //     {"id":"0","name":"一般职业"},
                //     {"id":"1","name":"农牧业"},
                //     {"id":"10","name":"卫生"},
                //     {"id":"11","name":"娱乐业"},
                //     {"id":"12","name":"文教"},
                //     {"id":"13","name":"宗教"},
                //     {"id":"14","name":"公共事业"},
                //     {"id":"15","name":"商业"},
                //     {"id":"16","name":"金融．保险业"},
                //     {"id":"17","name":"服务业"},
                //     {"id":"18","name":"家庭管理"},
                //     {"id":"19","name":"治安人员"},
                //     {"id":"2","name":"渔业"},
                //     {"id":"20","name":"体育"},
                //     {"id":"21","name":"其它"},
                //     {"id":"3","name":"木材森林业"},
                //     {"id":"4","name":"矿业 采石业"},
                //     {"id":"5","name":"交通运输业"},
                //     {"id":"6","name":"餐旅业"},
                //     {"id":"7","name":"建筑工程业"},
                //     {"id":"8","name":"制造业"},
                //     {"id":"9","name":"新闻出版广告业"}
                // ]
            });



            // 其他可选参数
            // width:250  //input框宽度
            // height:50  //input框高度
            // placeholder // input框提示词
            // prop:{
            //     value:"value",     // 选择器要获取的字段名称
            //     label:"label",     // 显示时的名称
            //     children:'children' // 子集的名称定义
            // }
            // time:250    // 下拉菜单显示出来的时间
            // showlast:false  // 是否只显示选中的最后一级
            // clicklast:false // 是否最后一级才可点击
            // checkData:['100','200'] // 回显数据
            $('#btn').click(function(){
                console.log(cascader.getChooseData('#demo1'))
            })

            // // 监听选中的事件
            // cascader.on('click','#demo1',function(data){
            //     // console.log(data)
            //     // 获取当前已选中的数据,可单独使用
            //     cascader.load({
            //         elem: '#demo3'
            //         ,search: {
            //             show: true,
            //             // minLabel: 1,
            //             // placeholder: '请输入搜索词'
            //         }
            //         ,value: data.value
            //         ,getChildren: function(value,callback){
            //             var data = []
            //             $.ajax({
            //                 url:'https://open.gog.cn/appz/region/getRegion/'+value,
            //                 type:'get',
            //                 success:function(res){
            //                     data = res.data;
            //                     for(var i in data){
            //                         data[i].value = data[i].id;
            //                         data[i].label = data[i].name;
            //                         delete data[i].id;
            //                         delete data[i].name;
            //                         data[i].hasChild = true;
            //                     }
            //                     callback(data);
            //                 }
            //             });
            //         },
            //         chooseData: []
            //     })
            // });


			/*
			let options={
    elem:'#demo'                              //【必填】dom对应的id值或class值，最好为id
    ,width:100                                //【可选】input框宽度  【默认：220】
    ,height:50                                //【可选】input框高度  【默认：40】
    ,placeholder:"请选择您的最佳伴侣"	       //【可选】input框placeholder值 【默认：请选择】
    ,prop:{
         value:'value',                       //【可选】定义接口需要取得的值的名称字段【默认:value】
         label:'label',                       //【可选】定义接口显示的名称字段  【默认：label】
         children:'children'                  //【可选】定义接口子集的名称字段 【默认：children】
    }
    ,search: {				      // 【可选】基于异步特点的搜索功能
        show: true,                           // 【可选】是否显示search功能【默认：false】
        minLabel: 5,                          // 【可选】元素超过多少个时显示搜索框【默认：10】
        placeholder: "请输入关键词"            // 【可选】搜索框的提示信息【默认：请输入关键词】
    }
    ,showlast:false                           //【可选】是否只显示最后一级 【默认：false】
    ,clicklast:false			      //【可选】点击最后一级才选择数据
    ,disabled:false                           //【可选】是否禁用当前组件
    ,data:[]                                  //【二选一】初始化的值
    ,value:0                                  //【二选一】ajax请求初始值,即获取根结点的初始请求参数

    ,clear:true                               // 【1.6新增】【可选】是否显示清空功能

    ,getChildren:function(value){             //【可选】用户自定义获取data子集的方法,
        let data = [];                        // value为当前dom的value值
        $.ajax({
            url:'https://open.gog.cn/appz/region/getRegion/'+value,
            type:'get',
            async:false,
            success:(res)=>{
                data = res.data;
                for(let i in data){
                    data[i].value = data[i].id;
                    data[i].label = data[i].name;
                    delete data[i].id;
                    delete data[i].name;
                    data[i].hasChild = true;
                }
            }
        });
        return data;
    }
    ,chooseData:['520000000000','520300000000','520302000000']  //回显参数
}
			 */

		});
	</script>
</body>
</html>
